<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖

    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import {Fill, RegularShape, Stroke, Style} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {Point} from 'ol/geom';
    import TileLayer from 'ol/layer/Tile'
    import {fromLonLat} from 'ol/proj';


    export default {
        name: 'VectorRegularShapeLayer',
        data() {
            return {}
        },
        mounted() {
            //渲染一个箭头的竖杆
            const shaft = new RegularShape({
                points: 2,//竖杆的头尾两个点
                radius: 5,//半径
                stroke: new Stroke({ //描边
                    width: 2,
                    color: 'black',
                }),
                rotateWithView: true,//是否需要根据视口旋转
            });

            //渲染头部三角形
            const head = new RegularShape({
                points: 3,//三个边代表三个点
                radius: 5,
                fill: new Fill({
                    color: 'black',
                }),
                rotateWithView: true,
            });

            //样式数据，由两个图片样式组合在一起形成一个带箭头的方向
            const styles = [new Style({image: shaft}), new Style({image: head})];

            var styleFunction = function (feature) {
                //获取到天气的wind是数据
                const wind = feature.get('wind');
                // rotate arrow away from wind origin
                //计算风向的角度，用弧度表示
                const angle = ((wind.deg - 180) * Math.PI) / 180;
                //使用风速来调整缩放比例
                const scale = wind.speed / 10;
                shaft.setScale([1, scale]);
                //设置旋转角度
                shaft.setRotation(angle);
                //设置头部三角形偏移的位置
                head.displacement_ = [
                    0,
                    head.getRadius() / 2 + shaft.getRadius() * scale,
                ];
                //头部旋转的角度与竖杆旋转的角度一样
                head.setRotation(angle);
                return styles;
            }
            const vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: vectorSource,
                style: styleFunction
            })
            this.map = new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [0, 0],
                    zoom: 2,
                }),
            });
            this.addFeatureStyle(vectorSource);


        },
        methods: {
            //给不同的要素设置不同的样式
            addFeatureStyle(vectorSource) {
                fetch('http://localhost:8888/openlayer/geojson/weather.json')
                    .then(response => response.json())
                    .then((json) => {
                        const features = [];
                        json.list.forEach(function (report) {
                            const feature = new Feature(
                                new Point(fromLonLat([report.coord.lon, report.coord.lat]))
                            );
                            feature.setProperties(report);
                            features.push(feature);
                        });
                        vectorSource.addFeatures(features);
                        this.map.getView().fit(vectorSource.getExtent());
                    });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
